<template>
  <div>
    <el-card class="box-card" style="margin-left: 180px;margin-right: 180px">
      <el-form  ref="form" :model="form" :rules="rules" label-width="80px">
        <el-table
            :data="myOrder.skuVoList"
            style="width: 100%">
          <el-table-column
              width="150">
            <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fit"></el-image>
          </el-table-column>
          <el-table-column
              prop="title"
              label="商品标题"
              width="300">
          </el-table-column>
          <el-table-column
              prop="brandName"
              label="品牌"
              width="150">
          </el-table-column>
          <el-table-column
              label="规格"
              width="150">
            <template slot-scope="scope">
              <el-row v-for="item in scope.row.groupVOS">
                <el-col v-for="prop in item.paramVOS">
                  {{prop.name}}:{{prop.value}}
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
              prop="number"
              label="选购个数"
              width="150">
          </el-table-column>
          <el-table-column
              prop="price"
              label="单价"
              width="130">
          </el-table-column>
          <el-table-column
              prop="total"
              label="金额"
              width="100">
          </el-table-column>
        </el-table>
        <el-form-item label="省" prop="receiverState">
          <el-input v-model="form.receiverState" placeholder="请输入省"></el-input>
        </el-form-item>
        <el-form-item label="市" prop="receiverCity">
          <el-input v-model="form.receiverCity" placeholder="请输入市"></el-input>
        </el-form-item>
        <el-form-item label="县" prop="receiverDistrict">
          <el-input v-model="form.receiverDistrict" placeholder="请输入县"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="receiverAddress">
          <el-input v-model="form.receiverAddress" placeholder="请输入街道、住址等详细地址"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="receiverMobile">
          <el-input v-model="form.receiverMobile" placeholder="请输入收货人手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮编" prop="receiverZip">
          <el-input v-model="form.receiverZip" placeholder="请输入收货人邮编"></el-input>
        </el-form-item>
        <el-form-item label="收货人" prop="receiver">
          <el-input v-model="form.receiver" placeholder="请输入收货人"></el-input>
        </el-form-item>

        <div style="margin-top: 20px">
          <span style="font-weight: bold">总金额:</span><span style="color: red">{{myOrder.total}}</span>&emsp;
          <el-button type="primary" @click="payment('form')" plain round>去结算</el-button>
        </div>
      </el-form>
    </el-card>

  </div>
</template>
<script>
export default {
  name: "MyCart",
  data(){
    return{
      myOrder:{},
      orderDTO:{
        skuIdList:[],
        orderId:null
      },
      orderId:null,
      form:{},
      rules:{
        receiverState:[
          { required: true, message: '请输入省', trigger: 'blur' }
        ],
        receiverCity:[
          { required: true, message: '请输入市', trigger: 'blur' }
        ],
        receiverDistrict:[
          { required: true, message: '请输入县', trigger: 'blur' }
        ],
        receiverAddress:[
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        receiverMobile:[
          { required: true, message: '请输入收货人手机号', trigger: 'blur' }
        ],
        receiverZip:[
          { required: true, message: '请输入收货人邮编', trigger: 'blur' }
        ],
        receiver:[
          { required: true, message: '请输入收货人姓名', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    getOrder(orderId){
      this.orderDTO.orderId=orderId;
      this.axios.get(this.$shopHost +"api/order/getOrderById",{params:this.orderDTO}).then(res=>{
        this.myOrder=res.data.data;
        console.log(res.data.data);
      })
    },
    payment(form){
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.form.orderId = this.orderId;
          this.axios.post(this.$shopHost+'api/order/payment',this.form).then(res=>{
            this.$message.success(res.data.message);
            if(res.data.result){
              this.$router.push("/list");
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  created() {
    this.orderId=this.$route.params.id;
    this.getOrder(this.orderId);
  }
}
</script>

<style scoped>

</style>